<template>
  <div class="data-panel" style="transform: scale(0.8); transform-origin: left top">
    <div class="data-item" @mousedown="downloadXml()" title="下载XML格式数据">
      <div class="data-item-icon bpmn-xml"></div>
    </div>
    <div class="data-item" @mousedown="downloadImage()" title="下载图片格式数据">
      <div class="data-item-icon bpmn-img"></div>
    </div>
    <div class="data-item">
      <input
        type="file"
        className="data-upload"
        @change="uploadXml($event)"
        title="上传XML格式数据"
      />
      <div class="data-item-icon bpmn-upload"></div>
    </div>
    <div class="data-item" @mousedown="getGraphRawData()" title="下载JSON格式数据">
      <div class="data-item-icon bpmn-look"></div>
    </div>
  </div>
</template>
<script lang="ts">
import router from '@/router'
import LogicFlow from '@logicflow/core'
import axios from 'axios'

function download(filename: string, text: string) {
  var element = document.createElement('a')
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
  element.setAttribute('download', filename)
  element.style.display = 'none'
  document.body.appendChild(element)
  element.click()
  document.body.removeChild(element)
}

function isJSON(str: string) {
  if (typeof str == 'string') {
    try {
      var obj = JSON.parse(str)
      if (typeof obj == 'object' && obj) {
        return true
      } else {
        return false
      }
    } catch (e) {
      console.log('error：' + str + '!!!' + e)
      return false
    }
  }
  //console.log("It is not a string!");
}

type FileEventTarget = EventTarget & { files: FileList }

export default {
  name: 'BpmnDataPanel',
  data() {
    return {}
  },
  props: {
    lf: Object
  },

  mounted() {},

  methods: {
    downloadXml() {
      const data = (this.$props.lf as LogicFlow).getGraphData() as string
      download('logic-flow.xml', data)
    },
    downloadImage() {
      ;(this.$props.lf as LogicFlow).getSnapshot()
    },
    uploadXml(ev: Event) {
      const file = (ev.target as FileEventTarget).files[0]
      const reader = new FileReader()
      reader.onload = (event: ProgressEvent<FileReader>) => {
        if (event.target) {
          let data = event.target.result as string
          /* 这里JSON无法解析，只有XML可以载入？？
          if (isJSON(data)) {
            data = JSON.parse(data);
          }
          */
          ;(this.$props.lf as LogicFlow).render(data)
        }
      }
      reader.readAsText(file) // you could also read images and other binaries
    },
    getGraphRawData() {
      const data = JSON.stringify((this.$props.lf as LogicFlow).getGraphRawData())
      //download("logic-flow.txt", data);
      console.log(data)
      var jsonData = JSON.parse(data)
      // this.axios.post('http://localhost:5176/api/Text/GetJson', jsonData).then((res) => {
      //   console.log(res.data)
      router.push('/ysl_workmanship')
      // })
    }
  }
}
</script>
<style>
.data-panel {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 20px;
  width: auto;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.data-item {
  margin: 0px 5px;
  display: inline-block;
  position: relative;
}
.data-item-icon {
  width: 20px;
  height: 20px;
  background-size: cover;
}
.data-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.data-upload {
  opacity: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  right: 0;
}

.bpmn-xml {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-img {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-upload {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-look {
  background: url()
    center center no-repeat;
  cursor: grab;
}
</style>
